<template>
  <div class="container">
    <ul class="goods-list">
      <li class="goods-item"
          v-for="(goods_item, index) in order_data"
          :key="index">
        <div class="picture">
          <img :src="imgUrl+goods_item.goods_image"
               alt=""
               class="img"
               mode="widthFix">
        </div>
        <div class="info">
          <div class="goods-name">{{goods_item.goods_name}}</div>
          <div class="price">
            <div class="rmb-group"
                 v-if="goods_item.goods_price_flag!=2">
              <!-- <div class="icon">￥</div> -->
              <span class="money_cent">￥</span>
              {{goods_item.goods_price}}
            </div>
            <div class="and"
                 v-if="goods_item.goods_price_flag==3">+</div>
            <div class="and"
                 v-if="goods_item.goods_price_flag==4">/</div>
            <div class="fen-group"
                 v-if="goods_item.goods_price_flag!=1">
              <!-- <div class="icon">分</div> -->
              <span class="money_cent">积分</span>
              {{goods_item.goods_credit}}
            </div>
          </div>
        </div>

        <div class="btn-evaluat"
             @click="evaluatr(goods_item)">
          {{goods_item.comment==0?'评价':'已评价'}}
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import imageurl from "@/assets/js/image.js";
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      order_data: [],
      order_id: "",
      imgUrl: imageurl
    };
  },
  methods: {
    get_data () {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: false //显示透明蒙层，防止触摸穿透,
      });
      common.fly_post("api/v4_2/orders/comList", {
        id: this.order_id
      }, result => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          this.order_data = res.data;
        }
      })
    },
    evaluatr (goods_item) {
      switch (goods_item.comment) {
        case 0:
          wx.navigateTo({
            url:
              "/pages/package_mall/scoring_goods/main?order_id=" +
              this.order_id +
              "&goods_id=" +
              goods_item.goods_id
          });
          break;
        default:
          wx.showToast({
            title: "该商品已评价", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
          break;
      }
    }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "评论"
    });
    if (options.order_id) {
      this.order_id = options.order_id;
      this.get_data();
    }
  },
  onShow () {
    this.get_data();
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  background-color: #fff;
  padding: 15px 0 0;
  margin-bottom: 10px;
  height: 100%;
  overflow: auto;
  .goods-list {
    width: 100%;
    background-color: #fff;
    .goods-item {
      height: 90px;
      margin: 0 15px 15px;
      position: relative;
      display: flex;
      .picture {
        width: 90px;
        height: 90px;
        background: rgba(216, 216, 216, 1);
        border-radius: 2px 0px 0px 2px;
        .img {
          width: 100%;
          max-height: 100%;
          border-radius: 2px;
        }
      }
      .info {
        flex: 1;
        background: rgba(251, 251, 251, 1);
        border-radius: 0px 2px 2px 0px;
        padding-left: 10px;
        line-height: 20px;
        position: relative;
        .goods-name {
          font-size: 14px;
          font-family: "Regular";
          color: rgba(68, 68, 68, 1);
          margin-top: 5px;
        }
        .specification {
          margin-top: 5px;
          font-size: 14px;
          font-family: "Regular";
          color: rgba(136, 136, 136, 1);
          .num {
            float: right;
            font-size: 14px;
            font-family: "Regular";
            color: rgba(68, 68, 68, 1);
          }
        }
        .price {
          font-size: 14px;
          font-family: "Medium";
          color: rgba(246, 70, 101, 1);
          vertical-align: middle;
          line-height: 20px;
          position: absolute;
          bottom: 0px;
          left: 10px;
          .fen-group,
          .rmb-group {
            display: inline-block;
            .icon {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              line-height: 12px;
              font-size: 8px;
              text-align: center;
              color: #fff;
              display: inline-block;
              vertical-align: middle;
            }
          }
          .and {
            display: inline-block;
            font-size: 15px;
            font-family: "Medium";
            color: rgba(136, 136, 136, 1);
            margin: 0 6px;
          }
          .fen-group {
            color: rgba(255, 113, 0, 1);
            .icon {
              background: rgba(255, 113, 0, 1);
            }
          }
          .rmb-group {
            color: rgba(246, 70, 101, 1);
            .icon {
              background: rgba(246, 70, 101, 1);
            }
          }
        }
      }
      .btn-evaluat {
        width: 70px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 16px;
        border: 1px solid rgba(246, 70, 101, 1);
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(246, 70, 101, 1);
        position: absolute;
        bottom: 5px;
        right: 0;
      }
    }
  }
}
.money_cent {
  font-size: 11px;
  position: relative;
  top: -1px;
  left: 4px;
}
</style>


